<template>
  <el-tabs type="border-card" v-model="tabNames[tabName]" @tab-click="onUpdateTab">
    <el-tab-pane label="页面属性" name="tab-0">
      <div class="right-page edit-handles-con">
        <el-form class="right-page-con">
          <template v-if="isPop">
            <switch-normal v-model="siteAttrs.isPopRandomEffect" label="弹层随机切换效果" @change="onUpdateSiteAttrs"></switch-normal>
            <color-normal v-model="pageAttrs.backgroundColor" label="背景颜色" format="rgb" @change="onChangePageAttrs"></color-normal>
            <switch-normal v-model="pageAttrs.isPopUseSiteBg" label="弹层使用站点背景" @change="onChangePageAttrs"></switch-normal>
            <slider-normal v-model="pageAttrs.opacity" :min="0" :max="1" :step="0.1" label="不透明度" @change="onChangePageAttrs"></slider-normal>
            <switch-normal v-model="isAutoClose" label="自动关闭" @change="onUpdatePageAutoCloseAttrs"></switch-normal>
            <slider-normal v-if="isAutoClose" v-model="pageAttrs.delayTime" :min="0" :max="10" :step="1" label="自动关闭时间(s)" @change="onChangePageAttrs"></slider-normal>
          </template>
          <template v-else>
            <add-img-con  class="margin-left-right-16" btnLable="添加图片" :url="attrs.bgUrl" comAttr="attrs" picAttr="bgUrl" :isCrop='true'></add-img-con>
            <input-normal label="背景图片地址" v-model="attrs.bgUrl" @change="onUpdateAttrs"></input-normal>
            <dropdown-normal v-if="attrs.bgUrl.length > 0" v-model="attrs.bgPositionRepeatType" :valLists="BG_POSITION_REPEAT_TYPES" label="背景位置平铺" @change="onChangeBgAttrs"></dropdown-normal>
            <color-normal v-model="attrs.backgroundColor" label="背景颜色" format="rgb" @change="onUpdateAttrs"></color-normal>
            <template v-if="siteAttrs.isCurrentPage">
              <template v-if="siteAttrs.h5Type == H5_TYPE.mobile || siteAttrs.h5Type == H5_TYPE.pc">
                <switch-normal v-model="isLong" label="页面高度设置" @change="onUpdateSiteLongAttrs"></switch-normal>
                <slider-normal v-if="isLong" v-model="pageAttrs.height" :min="MOBILE_WID_HEI.height" :max="30000" :step="10" label="页面高" @change="onChangeHeight"></slider-normal>
              </template>
              <template if="siteAttrs.h5Type == H5_TYPE.pc">
                <slider-normal v-model="pageAttrs.width" :min="MOBILE_WID_HEI.minWidth" :max="3000" :step="10" label="页面宽" @change="onChangeWidth"></slider-normal>
              </template>
            </template>
            <template v-if="isSite" >
              <switch-normal v-model="siteAttrs.isNoSwiping" label="单页禁止滑动" @change="onUpdateSiteAttrs"></switch-normal>
              <switch-normal v-if="siteAttrs.isNoSwiping" v-model="siteAttrs.isRandomEffect" label="页面随机切换效果" @change="onUpdateSiteAttrs"></switch-normal>
              <dropdown-normal v-else v-model="siteAttrs.swiper.effect" :valLists="SWIPER_EFFCE" label="切换效果" :bIsBtn="false" @change="onUpdateSiteAttrs" ></dropdown-normal>
              <template v-if="!isBottomTab && !siteAttrs.isNoSwiping">
                <switch-normal v-model="siteAttrs.swiper.isTurnPage" label="鼠标滑动翻页" @change="onUpdateSiteAttrs"></switch-normal>
                <dropdown-normal v-model="siteAttrs.swiper.turnPageMode" :valLists="PAGE_MODE_TYPES" label="翻页模式" @change="onUpdateSiteAttrs"></dropdown-normal>
                <switch-normal v-model="siteAttrs.swiper.autoTurnPage" label="自动翻页" @change="onUpdateSiteAttrs"></switch-normal>
                <slider-normal v-if="siteAttrs.swiper.autoTurnPage" v-model="siteAttrs.turnPageTime" :min="0" :max="5" :step="0.1" label="翻页时间" @change="onUpdateSiteAttrs"></slider-normal>
                <input-normal label="滑动翻页箭头url" placeholder="url,width.height" v-model="siteAttrs.swiper.swiperHintUrl" @change="onUpdateSiteAttrs"></input-normal>
              </template>
              <dropdown-normal v-model="siteAttrs.pageId" :valLists="getLists(PAGE_TYPE_.page)" label="默认显示页面" @change="onUpdateSiteAttrs"></dropdown-normal>
              <dropdown-normal v-model="siteAttrs.popId" :valLists="getLists(PAGE_TYPE_.pop)" label="默认显示弹层" @change="onUpdateSiteAttrs"></dropdown-normal>
              <switch-normal v-model="siteStatus.isHighComponentConfiguration" label="高级组件配置" @change="onUpdateSiteStatus"></switch-normal>
              <switch-normal v-model="siteAttrs.isOffline" label="下线(关闭接口上行数据)" @change="onUpdateSiteAttrs"></switch-normal>
              <textarea-normal v-if="siteAttrs.isOffline" v-model="siteAttrs.offlineJumpLink" label="下线跳转链接" @change="onUpdateSiteAttrs"></textarea-normal>
              <switch-normal v-model="siteAttrs.push_visible" label="公开发博内容" @change="onUpdateSiteAttrs"></switch-normal>
              <switch-normal v-model="siteAttrs.isShareWeiboWinxin" label="分享到微博或是微信" @change="onUpdateSiteAttrs"></switch-normal>
              <switch-normal v-model="siteAttrs.isDisplayDebuggerText" label="在移动端显示代码版本" @change="onUpdateSiteAttrs"></switch-normal>
              <textarea-normal v-model="siteAttrs.controlData" label="自定义站点信息" @change="onUpdateSiteAttrs"></textarea-normal>
              <switch-normal v-model="siteStatus.isUploadFile" label="上传文件" @change="onUpdateSiteStatus"></switch-normal>
              <textarea-normal v-model="siteAttrs.loadAssets" label="加载素材" placeholder="图片url,音频url,视频url" @change="onUpdateSiteAttrs"></textarea-normal>
              <switch-normal v-model="siteAttrs.isDisplayAssetsLoading" label="显示素材加载" @change="onUpdateSiteAttrs"></switch-normal>
              <input-normal v-model="siteAttrs.noSwipings" label="不能滑动页面" placeholder="页面id,1,2,8," @change="onUpdateSiteAttrs"></input-normal>
              <input-normal label="图上传大小M" v-model="siteStatus.uploadImgSize" @change="onUpdateSiteStatus"></input-normal>
              <switch-normal v-model="siteStatus.isCopySite" label="本地数据站点复制" @change="onUpdateSiteStatus"></switch-normal>
              <p v-if="siteStatus.isCopySite" style="color:red">使用这个功能需要将站点的数据复制到文本框中，不熟悉的这个功能慎用！！操作错误站点数据不小心被覆盖只能重新做哦！</p>
              <input-normal label="reload时间" placeholder="50" v-model="siteAttrs.reloadTime" @change="onUpdateSiteAttrs"></input-normal>
              <el-form-item label="开始时间">
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="sdate" type="datetime" placeholder="选择日期时间" @change="onChangeDate('sdate')"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="edate" type="datetime" placeholder="选择日期时间" @change="onChangeDate('edate')"></el-date-picker>
              </el-form-item>
              <switch-normal v-model="siteAttrs.isNotSaveImg" label="长按保存图片(不允许)" @change="onUpdateSiteAttrs"></switch-normal>
            </template>
          </template>
          <input-normal label="页面id" v-model="currentPage.id" @change="onChangePageAttrId"></input-normal>
          <!-- <input-normal label="页面自动触发组件id" v-model="pageAttrs.triggerEventTimeAndCompId" @change="onChangePageAttrs"></input-normal> -->
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ColorNormal from '@/views/components/edit/ColorNormal.vue'
import InputNormal from '@/views/components/edit/InputNormal.vue'
import SliderNormal from '@/views/components/edit/SliderNormal.vue'
import SwitchNormal from '@/views/components/edit/SwitchNormal.vue'
import DropdownNormal from '@/views/components/edit/DropdownNormal.vue'
import AddImgCon from '@/views/components/add-img-con.vue'
import TextareaNormal from '@/views/components/edit/TextareaNormal.vue'

import { mapActions, mapState, mapGetters } from 'vuex'
import { PAGE_MODE_TYPES, PAGE_TYPE, PAGE_TYPE_, SWIPER_EFFCE, BG_POSITION_REPEAT_TYPES } from '@/common/const'
import { H5_TYPE } from '@/common/const-dif'
import { EventBus } from "@/store/index";
import { MOBILE_WID_HEI } from '@/common/const-dif'
import { reactive } from 'vue'

export default {
  name: "RightPage",
  setup () {
    const state =  reactive({
      sdate: '',
      edate: ''
    })
    const state_ = {
      PAGE_MODE_TYPES: PAGE_MODE_TYPES,
      MOBILE_WID_HEI: MOBILE_WID_HEI,
      SWIPER_EFFCE: SWIPER_EFFCE,
      BG_POSITION_REPEAT_TYPES: BG_POSITION_REPEAT_TYPES,
      isDebug: process.env.NODE_ENV === 'production' ? false : true,
      H5_TYPE: H5_TYPE,
      PAGE_TYPE_: PAGE_TYPE_,
      tabName: 'page',
    }
    _.merge(state, state_)
    return state
  },
  components: {
    InputNormal,
    ColorNormal,
    SliderNormal,
    SwitchNormal,
    DropdownNormal,
    AddImgCon,
    TextareaNormal,
  },
  mounted() {
    this.sdate = this.siteAttrs.sdate
    this.edate = this.siteAttrs.edate
  },
  computed: {
    ...mapState({
      currentPage: (state) => state.components.currentPage,
      pageAttrs: (state) => _.cloneDeep(state.components.currentPage.attrs),
      siteAttrs: (state) => _.cloneDeep(state.components.attrs),
      isBottomTab: (state) => state.components.siteStatus.isTab,
      siteStatus: (state) => _.cloneDeep(state.components.siteStatus),
      user: (state) => state.user.user,
      tabNames: (state) => _.cloneDeep(state.components.tabNames),
    }),
    ...mapGetters("components", {
      isSite: "isSite",
      pages: "getH5Pages",
      pops: "getPopPages"
    }),
    isPop(){
      return this.currentPage.type == PAGE_TYPE_.pop ? true : false
    },
    isAutoClose: {
      get() {
        return this.pageAttrs.isAutoClose;
      },
      set() {
        this.pageAttrs.isAutoClose = !this.pageAttrs.isAutoClose;
        if(!this.pageAttrs.isAutoClose) {
          this.pageAttrs.delayTime = 0;
        }
      },
    },
    isLong: {
      get(){
        if(this.siteAttrs.pageType == PAGE_TYPE.long){
          return true
        }else{
          return false
        }
      },
      set(isLong_){
        if(!isLong_){
          this.pageAttrs.height = MOBILE_WID_HEI.height
          this.onChangeHeight()
        }
        this.siteAttrs.pageType = isLong_ ? PAGE_TYPE.long : PAGE_TYPE.single
      }
    },
    attrs(){
      if(this.isSite){
        return this.siteAttrs;
      }else{
        return this.pageAttrs;
      }
    },
  },
  methods: {
    onShadowSizeChange() {},
    ...mapActions({
      updatePageAttrs: "components/updatePageAttrs",
      updateSiteAttrs: "components/updateSiteAttrs",
      setImgCropPop: "setImgCropPop",
      updateSiteScale: "components/updateSiteScale",
      updateTab: "components/updateTab",
    }),
    onUpdateTab(){
      let params = {};
      params[this.tabName] = this.tabNames[this.tabName]
      this.updateTab(params);
    },
    onUpdateSiteStatus(){
      this.$store.commit("components/updateSiteStatus", this.siteStatus)
    },
    onUpdateSiteLongAttrs(){
      if(this.isLong){
        this.siteAttrs.isTurnPage = false
        this.siteAttrs.isVisiblePhone = false
      }
      this.updateSiteAttrs(this.siteAttrs)
    },
    onChangeHeight(){
      this.updatePageAttrs({attrs:{height:this.pageAttrs.height}});
    },
    onChangeWidth(){
      let scale = (window.innerWidth - MOBILE_WID_HEI.leftWidth - MOBILE_WID_HEI.rightWidth - 80) / this.currentPage.attrs.width;
      if(scale > 1){
          scale = 1
        }
      this.updateSiteScale(scale)
      this.updatePageAttrs({attrs:{width:this.pageAttrs.width}});
      this.$nextTick( () => {
        EventBus.$emit("refreshScale");
      })
    },
    onUpdateSiteAttrs(){
      this.updateSiteAttrs(this.siteAttrs)
    },
    onUpdateAttrs(){
      if(this.isSite){
        this.updateSiteAttrs(this.siteAttrs)
      }else{
        this.updatePageAttrs({attrs: this.pageAttrs});
      }
    },
    onChangeBgAttrs(){
      if(this.isSite){
        this.updateSiteAttrs(this.siteAttrs);
      }else{
        this.updatePageAttrs({attrs: this.pageAttrs});
      }
    },
    onUpdatePageAutoCloseAttrs() {
      this.updatePageAttrs({attrs: this.pageAttrs});
    },
    onChangePageAttrs(){
      this.updatePageAttrs({attrs: this.pageAttrs});
    },
    onChangePageAttrId(){
      this.updatePageAttrs({id: this.currentPage.id});
    },
    getLists(index) {
      let list = [];
      if(index == PAGE_TYPE_.pop){
        this.pushPops(list);
      }else{
        this.pushPages(list);
      }
      return list;
    },
    pushPages(list){
      let len = this.pages.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "页面-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    pushPops(list){
      let len = this.pops.length;
      list.push({name:'无', value:0});
      for (let i = 0; i < len; i++) {
        let str = "弹层-" + (i+1);
        list.push({name:str, value: (i+1)});
      }
    },
    onChangeDate(str){
      this.siteAttrs[str] = this[str]
      this.onUpdateSiteAttrs()
    }
  }
};
</script>
<style lang="scss">
.right-page {
  color: #43475c;
  font-size: 14px;

  h1{
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #43475C;
    background: #F3F5FA;
    font-weight: bold;
  }
  .right-page-con{
    margin-top: 10px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active:hover{
    background-color: transparent;
    border: none;
    color: #000;
  }
}
</style>
